<template>
  <div>
    <customSearch ref="customSearch" placeholder="请输入企业名称" title="设备列表" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
    <div class="listInner">
      <div v-if="listData.length > 0" class="common_list">
        <div v-for="(item, index) in listData" :key="index" class="list_item" @click="goToDetails(item)">
          <div class="content_area">
            <div class="number_order">{{ index + 1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.companyName }}
              </div>
              <ul>
                <li>
                  <i class="iconfont c-text-color1">&#xe7e5;</i>
                  <div class="label">设施编号：</div>
                  <div class="value">{{ item.deviceCode }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color2">&#xe634;</i>
                  <div class="label">设施类型：</div>
                  <div class="value">{{ item.deviceType }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color3">&#xe87e;</i>
                  <div class="label">设施状态：</div>
                  <div class="value">{{ item.active }}</div>
                </li>
                <!--                <li>-->
                <!--                  <i class="iconfont c-text-color4">&#xe685;</i>-->
                <!--                  <div class="label">投入使用日期：</div>-->
                <!--                  <div class="value">{{ item.putUseTime }}</div>-->
                <!--                </li>-->
                <!--                <li>-->
                <!--                  <i class="iconfont c-text-color5">&#xe6d7;</i>-->
                <!--                  <div class="label">设计使用年限：</div>-->
                <!--                  <div class="value">{{ item.planUseYear }}年</div>-->
                <!--                </li>-->
                <li>
                  <i class="iconfont c-text-color4">&#xe700;</i>
                  <div class="label">环保管理员：</div>
                  <div class="value">{{ item.envHead }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="formInline.pageNum" :pages="pages" @load="handlePages" />
    </div>
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll safe-area-inset-bottom close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <!--          <div class="checkbox-title">设备名称：</div>-->
          <!--          <el-input v-model="formInline.deviceName" placeholder="请输入设备名称" size="small" clearable />-->
          <div class="checkbox-title" style="margin-top: 15px">设施编号</div>
          <el-input v-model="formInline.deviceCode" placeholder="请输入设施编号" size="small" clearable />
          <customPopCheckbox style="margin-top: 20px" :list="selectOptionAll['设施类型']" :check-value.sync="formInline.deviceType" title="设施类型" />
          <!--          <custom-timer title="投入使用日期" :is-interval="true" :start.sync="formInline.starTime" :end.sync="formInline.endTime" :picker-title="'请选择所属年份'" />-->
          <customPopCheckbox style="margin-top: 20px" :list="selectOptionAll['环保设备状态']" :check-value.sync="formInline.active" title="设施状态" />
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { parseTime } from '@/utils'
import { HbDeviceList } from '@/api/commonPage/facility'

export default {
  mixins: [commonList],
  data() {
    return {
      currenTime: parseTime(new Date(), '{y}-{m}-{d}'),
      formInline: {
        pageNum: 1,
        pageSize: 10,
        companylds: -1,
        deviceType: '',
        deviceName: '',
        starTime: '',
        endTime: '',
        companyName: '',
        deviceCode: '',
        active: ''
      },
      current: '',
      listData: []
    }
  },
  mounted() {
    const { current } = this.$route.query
    if (current) {
      this.current = current
    }
    this.companyList()
  },
  methods: {
    // 分页
    handlePages(value) {
      this.formInline.pageNum = value
      this.companyList()
    },
    // 企业名称查询
    handleSearch(value) {
      this.formInline.companyName = value
      this.formInline.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 高级查询
    handleSuperSearch() {
      this.superSearch = false
      this.formInline.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 级联选择器选择变化
    cascadeChange(args) {
      this.formInline.industryType = args.selectedOptions[args.selectedOptions.length - 1].text || ''
    },
    // 重置
    resetSuperSearch() {
      const pageSize = this.formInline.pageSize
      const pageNum = this.formInline.pageNum
      this.$refs.customSearch.restore()
      Object.keys(this.formInline).forEach(val => {
        this.formInline[val] = ''
      })
      this.formInline.pageSize = pageSize
      this.formInline.pageNum = pageNum
    },
    // 跳转详情
    goToDetails(item) {
      const { deviceId } = item
      this.$router.push({
        path: '/staging/facilityDetail',
        query: { deviceId, current: this.current, title: '设备设施' }
      })
    },
    // 返回工作台
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    // 获取企业列表数据
    async companyList() {
      this.$refs.customLoadmore.loadStatus = true
      // this.layout.showLoading()
      const { status, data } = await HbDeviceList(this.formInline)
      if (status === 0 && data) {
        this.total = data.total
        this.listData = this.listData.concat(data.list)
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
      // this.layout.hideLoading()
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}
</style>

